<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>前端路由</title>
	</head>
	<body>
		<div id="app">
      <router-link to="/">主页</router-link>
      <router-link to="/news">新闻</router-link>
      <router-link to="/books">图书</router-link>
      <router-link to="/video">视频</router-link>

      <router-view></router-view>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@next"></script>
		<script>
      const home = {template: '<div>首页</div>'}
      const news = {template: '<div>新闻页面</div>'}
      const books = {template: '<div>图书页面</div>'}
      const video = {template: '<div>视频页面</div>'}

      const routes = [
        {path: '/', component: home},
        {path: '/news', component: news},
        {path: '/books', component: books},
        {path: '/video', component: video}
      ]

      const router = VueRouter.createRouter({
        history: VueRouter.createWebHashHistory(),
        routes
      })

      const app = Vue.createApp({})
      app.use(router)
      app.mount('#app')

    </script>
	</body>
</html>

